這次的內容是,當我們滑鼠滑動到灰色的區塊,白色滑塊會移動到我們的指定位置
作品實做
let target = document.querySelectorAll("a");
let highlight = document.createElement("span");
let now = null;
highlight.classList.add("highlight");
document.body.appendChild(highlight); //把 highlight(白色滑塊)元素添加到網頁的內容中
function highlightHandler() {
now = this; //now儲存點擊到的a標籤
setPosition();
}
function setPosition() {
if (!now) return; //如果now是假值,則return
let { top, left, width, height } = now.getBoundingClientRect();
//解構賦值取出屬性
highlight.style.display = "";
highlight.style.width = `${width}px`; //定義滑快的寬
highlight.style.height = `${height}px`; //定義滑快的高
highlight.style.top = `${top + window.scrollY}px`; //定義在網頁中的Y座標
highlight.style.left = `${left + window.scrollX}px`;//定義在網頁中的X座標
}
target.forEach((a) => a.addEventListener("mouseenter", highlightHandler)); //碰到頁面中的A標籤時
a.addEventListener("mouseenter", highlightHandler))
監聽滑鼠滑動到a標籤時,執行highlightHandler
elem.getBoundingClientRect()
提供了元素的大小及其相對於視窗的位置。並回傳一個 DOMRect 物件,其中包含了 left/top/right/bottom/x/y/widthheigh/twidthheight
等屬性。highlight.style.display = "block"
這一行的意思是將 highlight
元素的 display
屬性設置為block,讓白色滑塊可以顯示出來
window.addEventListener("resize", setPosition);
[ Alex 宅幹嘛 ] 👨💻 深入淺出 Javascript30 快速導覽 | Day 22:Follow Along Link Highliter
JS30